const wxml = (detail_) => {
	// <image class="logo2" src="` + detail_.logo2 + `" />
	let result = `
	<view class="container">
			<image class="logo" src="` + detail_.logo + `" />
			<view  >
				<text class="head_title">${detail_.titleName}${detail_.service_type||''}服务报告</text>
		</view>
	
		<view class="item">
			<text class="left">工单号：${detail_.workID || ''}</text>
			<text class="right">日期：${detail_.time || ''}</text>
		</view>
		
		<view class="border_"></view>
		<view class="item">
			<text class="left">客户名称：${detail_.name || ''}</text>
			<text class="right">合同类型：${detail_.contract_status || ''}</text>
		</view>
		
		<view class="item">
			<text class="left">类别：${detail_.pinpai.name || ''}</text>
			<text class="right">品牌：${detail_.leibie.name || ''}</text>
		</view>
		<view class="item">
			<text class="left">型号：${detail_.xinghao.name || ''}</text>
			<text class="right">软件版本：${detail_.software_version || ''}</text>
		</view>
		<view class="item">
			<text class="left">序列号：${detail_.serial || ''}</text>
			<text class="right">质保期：${detail_.qa_time || ''}</text>
		</view>
		<view class="item">
			<text class="right">服务类型：${detail_.service_type || ''}</text>
		</view>
		<view class="item">
			<text class="left">坏件：${detail_.bad_xlh || ''}（序列号） ${detail_.bad_bjh || ''}(备件号）</text>
			<text class="right"></text>
		</view>
		<view class="item">
			<text class="left">更换件：${detail_.change_xlh || ''}（序列号） ${detail_.change_bjh || ''}(备件号）</text>
			<text class="right"></text>
		</view>
		
		<view class="item">
			<text class="left3">设备故障现象（Equipment malfunction phenomenon）：</text>
		</view>`;

	if (detail_.imageTex) {
		result += `<view class="item item2">`;
		detail_.imageTex?.forEach(image => {
			result += `
				<image src="` + image + `"  class="phenomenon" />`;
		});
		result += `
			</view>`;
	}

	result += `<view class="border_">
		</view>
		<view>
			<text class="left_title">服务信息</text>
		</view>
		<view class="item">
			<text class="left3">客户报修内容（Customer repair content）：</text>
		</view>
		<view>
			<text class="content">${detail_.content || '-'}</text>
		</view>
		<view class="border_">
		</view>
		<view class="item">
			<text class="left3">维修服务记录（Maintenance service records）：</text>
		</view>
		<view>
			<text class="content">${detail_.repair_record || '-'}</text>
		</view>
		<view class="border_">
		</view>
		<view class="item">
			<text class="left1">客户报修时间：</text>
			<text class="right1">${detail_.createtime || '-'}</text>
		</view>
		<view class="item">
			<text class="left1">工程师到达时间：</text>
			<text class="right1">${detail_.present_time || '-'}</text>
		</view>
		<view class="border_">
		</view>`;
	if (detail_.survey?.ballTubeModel || detail_.survey?.patientAvrageDaySum || detail_.survey
		?.ballTubeExposeTimes || detail_.survey?.ballTubeInstallTime || detail_.survey?.isOriginalFactory == '0') {
		result += `<view>
				<text class="left_title">球管信息</text>
			</view>
			`;
	}
	if (detail_.survey?.ballTubeModel || detail_.survey?.patientAvrageDaySum) {
		result += `<view class="item">
					<text class="right">球管型号：${detail_.survey?.ballTubeModel || ''}</text>
					<text class="right">平均每日病人量：${detail_.survey?.patientAvrageDaySum || ''}</text>
				</view>`;
	}
	if (detail_.survey?.ballTubeExposeTimes || detail_.survey?.ballTubeInstallTime) {
		result += `<view class="item">
				<text class="right">球管曝光秒次：${detail_.survey?.ballTubeExposeTimes || ''}</text>
				<text class="right">球管安装日期：${detail_.survey?.ballTubeInstallTime || ''}</text>
			</view>`;
	}

	if (detail_.survey?.isOriginalFactory == '0' || detail_.survey?.factoryModel) {
		result += `<view class="item">
				<text class="right">若非原厂球管：${detail_.survey?.isOriginalFactory == 1 ? '是' : '否'}</text>
				<text class="right">球管厂家型号：${detail_.survey?.factoryModel || ''}</text>
			</view>`;
	}
	if (detail_.survey?.ballTubeModel || detail_.survey?.patientAvrageDaySum || detail_.survey
		?.ballTubeExposeTimes || detail_.survey?.ballTubeInstallTime || detail_.survey?.isOriginalFactory == '0') {
		result += `<view class="border_" />`;
	}
	if (detail_.enclosure) {
		result += `<view>
			<text class="left4">附件说明：${detail_.enclosure || ''}</text>
		</view>`;
	}

	// if (detail_.enclosure_picture && detail_.enclosure_picture != '') {
	// 	result += `<view class="item">
	// 			<text class="left3">附件图片</text>
	// 		</view>`;
	// 	result += `<view class="item">`;
	// 	detail_.enclosure_picture?.forEach(image => {
	// 		result += `
	// 			<image src="` + image + `"  class="phenomenon" />`;
	// 	});
	// 	result += `</view>`;
	// }
	if (detail_.enclosure || detail_.enclosure_picture) {
		result += `<view class="border_" />`;
	}

	if (detail_.ending) {
		result += `<view class="item">
			<text class="left1">维修结果及建议：</text>
			<text class="right1"></text>
		</view>
		<view>
			<text class="content">${detail_.ending || ''}</text>
		</view>
		<view class="border_" />`;
	}

	result += `
		<view class="item">
			<text class="left2">客户签字(点击代签字)</text>
			<text class="right2">工程师签字</text>
		</view>
		<view class="item1">`;
	if (detail_.image) {
		result += `<image src="` + detail_.image + `"  class="pic"/>`;
	}
	if (detail_.image1) {
		result += `<image src="` + detail_.image1 + `"  class="pic"/>`;
	}
	result += `
			<text class="right3">${detail_.nickname || ''}</text>
		</view>
		<view class="border_">
		</view>
		<view>
			<text class="content1">备注：本函仅针对该工单所反馈问题做确认操作，签字后该工单即变更为完结状态，如有其他问题请重新发起报修，谢谢</text>
		</view>
	</view>
	`
	return result
}

/**
 * @param {*} screenWidth 屏幕宽度
 * @param {*} canvasWidth  画布宽度
 * @param {*} canvasHeight  画布高度
 * @param {*} numberWidth  数字宽度，动态设置
 * @return {*} 
 */
const style = (screenWidth, canvasWidth, canvasHeight) => {
	return {
		"container": {
			width: canvasWidth,
			height: canvasHeight,
			position: 'relative',
			backgroundColor: '#ffffff',
			flexDirection: "column",
			left: 0
		},
		"logo": {
			position: 'absolute',
			left: 10,
			top: 10,
			zIndex: 9,
			width: 108.6 * 0.7,
			height: 74.7 * 0.54,
		},
		"logo2":{
			position:'absolute',
			right: 20,
			top: 16,
			width: 188.6,
			height: 188.6,
		},
		"border_": {
			height: '1',
			width: canvasWidth * 0.9,
			marginLeft: canvasWidth * 0.03,
			backgroundColor: "#EBEEF1"
		},
		"item": {
			display: 'flex',
			flexDirection: "row",
			alignItems: 'center',
			paddingTop: '6',
			paddingLeft: '22'
		},
		"item1": {
			display: 'flex',
			flexDirection: "row",
			alignItems: 'center',
			justifyContent: 'space-around',
			backgroundColor: "#F5F6F8",
			marginBottom: 4,
		},
		"item2": {
			display: 'flex',
			flexWrap: "wrap",
		},
		"left2": {
			fontSize: 14,
			color: "#000",
			fontWight: '600',
			width: canvasWidth * 0.5,
			height: screenWidth * 0.025,
			textAlign: 'center',
			display: 'flex',
		},
		"left3": {
			fontSize: 12,
			color: "#333",
			width: canvasWidth,
			height: screenWidth * 0.018,
			textAlign: 'left',
		},
		"left4": {
			fontSize: 12,
			color: "#333",
			width: canvasWidth * 0.9,
			height: screenWidth * 0.03,
			marginLeft: canvasWidth * 0.06,
			textAlign: 'left',
		},
		"right2": {
			fontSize: 12,
			color: "#000",
			fontWight: '600',
			width: canvasWidth * 0.5,
			height: screenWidth * 0.025,
			textAlign: 'center',
			display: 'flex',
		},
		"right3": {
			fontSize: 12,
			color: "#000",
			fontWight: '600',
			width: 135,
			height: screenWidth * 0.03,
			textAlign: 'center',
			display: 'flex',
		},
		"left1": {
			fontSize: 12,
			color: '#333',
			width: canvasWidth * 0.5,
			height: screenWidth * 0.018,
			textAlign: 'left',
			display: 'flex',

		},
		"right1": {
			color: '#333',
			width: canvasWidth * 0.5,
			height: screenWidth * 0.018,
			textAlign: 'left',
			fontSize: 12,
			alignItems: 'left',
			display: 'flex',
		},
		"left": {
			color: '#333',
			width: canvasWidth * 0.5,
			height: screenWidth * 0.016,
			textAlign: 'left',
			fontSize: 12,
			display: 'flex',
		},
		"right": {
			color: '#333',
			width: canvasWidth * 0.5,
			height: screenWidth * 0.016,
			textAlign: 'left',
			fontSize: 12,
			alignItems: 'left',
			display: 'flex',
		},
		"head_title": {
			fontSize: 16,
			color: "#616161",
			fontWight: 600,
			width: canvasWidth * 0.84,
			height: screenWidth * 0.025,
			marginLeft: canvasWidth * 0.08,
			textAlign: "center",
			marginTop: canvasWidth * 0.02,
			marginBottom: canvasWidth * 0.01,
		},
		"left_title": {
			fontSize: 14,
			color: "#000",
			fontWight: '600',
			width: canvasWidth * 0.84,
			height: screenWidth * 0.018,
			marginLeft: canvasWidth * 0.04,
			textAlign: "left",
			marginTop: canvasWidth * 0.01,
		},
		"content": {
			fontSize: 12,
			color: '#333',
			width: canvasWidth * 0.9,
			minHeight: screenWidth * 0.02,
			marginLeft: canvasWidth * 0.04,
			textAlign: "left",
		},
		"content1": {
			fontSize: 12,
			color: '#ccc',
			width: canvasWidth * 0.9,
			minHeight: screenWidth * 0.3,
			marginLeft: canvasWidth * 0.06,
			textAlign: "left",
			marginTop: 15
		},
		"pic": {
			width: 135,
			height: 50,
			marginTop: canvasWidth * 0.02,
			marginBottom: canvasWidth * 0.01,
		},
		phenomenon: {
			width: 180,
			height: 170,
			marginRight: 10,
			marginBottom: canvasWidth * 0.01,
		}
	}
}

module.exports = {
	wxml,
	style
}